<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>退款详情</title>
    <link rel="stylesheet" href="http://cdn.suoluomei.com/common/js/css/wpf/weui.css" />
    <link rel="stylesheet" href="http://cdn.suoluomei.com/common/js/css/wpf/jquery-weui.css" />
    <link rel="stylesheet" href="http://cdn.suoluomei.com/common/js/css/wpf/weui.min.css" />

    <style>
        *{padding: 0;margin: 0;}
        .wpf_orderBox{position: relative;overflow-x: hidden;width: 100%;}
        .weui-cells,.weui-panel{margin-top: 0;}
        .weui-panel:before,.weui-media-box_appmsgs:nth-child(1):before{border-top: none;}
        .weui-media-box_appmsg .weui-media-box__hd{width: 70px;height: 70px;}
        .weui-media-box__title{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;white-space: pre-wrap;line-height: 18px;font-size: 16px;color: #373938;}
        .weui-media-box__color{color: #999999;font-size: 12px;padding-top: 5px;box-sizing: border-box;}
        .weui-media-box_appmsgs{display: block;position: relative;}
        .weui-media-box_appmsgs:before {content: " ";position: absolute;left: 0;top: 0;right: 0;height: 1px;border-top: 1px solid #E5E5E5;color: #999999;-webkit-transform-origin: 0 0;transform-origin: 0 0;-webkit-transform: scaleY(0.5);transform: scaleY(0.5);left: 15px;}

        .refresh_box{width: 100%;position: relative;padding: 25px 15px;box-sizing: border-box;background: #FE0036;color: #ffffff;}
        .refresh_add{font-size: 14px;}
        .refresh_sj{width: 100%;padding: 8px 15px;box-sizing: border-box;}
        .suspension{width: 100%;height:45px;overflow: hidden;display: flex;flex-direction: row-reverse;align-items: center;border-top: 1px solid #e5e5e5;padding-right: 5px;box-sizing: border-box;}
        .suspension_c{width: 90px;padding: 2px 0;box-sizing: border-box;text-align: center;border: 1px solid #e5e5e5;border-radius: 4px;font-size: 14px;color: #999999;margin-right: 10px;}
        .suspension_q{color: #FE0036;border: 1px solid #FE0036;}
        .weui-cell__hd_img{width: 20px;height: 20px;}
        .weui-panel_bg{background: #e5e5e5;}
        .order_number{width: 100%;position: relative;padding: 10px 15px;box-sizing: border-box;}
        .order_serial{color: #888888;font-size: 12px;padding: 2px 0;box-sizing: border-box;}

        .site_box{width: 100%;display: flex;position: relative;padding: 10px 15px;box-sizing: border-box;}
        .site_box:before{content: '';position: absolute;width: 100%;height: 1px;background: #e5e5e5;top: 0;left: 0;}
        .site_box:after{content: '';position: absolute;width: 100%;height: 1px;background: #e5e5e5;bottom: 0;left: 0;}
        .site_L{flex: 0.1;}
        .site_img{width: 25px;height: 25px;position: absolute;top: calc(50% - 15px);}
        .site_img img{width: 100%;height: 100%;}
        .site_R{flex: 0.9;color: #707070;font-size: 14px;}
        .site_name_box{display: flex;}
        .site_name{flex: 1}
        .site_phone{flex: 1;text-align: right;}
        .site_name_txt{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;white-space: pre-wrap;line-height: 20px;}

        .consult_with{padding: 5px 15px 5px 35px;font-size: 14px;color: #888888;}
        .consult_with_li{padding: 5px 0;box-sizing: border-box;}

        .logistics_number{width: 100%;padding: 10px 0;overflow: hidden;display: flex;flex-direction: row-reverse;align-items: center;border-top: 1px solid #e5e5e5;box-sizing: border-box;}
        .logistics_number_c{width: 90px;height: 50px;box-sizing: border-box;text-align: center;border: 1px solid #e5e5e5;border-radius: 4px;font-size: 14px;margin-right: 10px;}
        .logistics_number_cx{width: 130px;}
        .logistics_number_dj{line-height: 50px;}
        .logistics_number_gd{padding-right: 20px;box-sizing: border-box;font-size: 14px}
    </style>
</head>
<body>
<!--如果商家还没有处理显示-->
<div class="wpf_orderBox">
    <div class="refresh_box">
        <div class="refresh_name">请等待售后处理</div>
        <!--<div class="refresh_add">还剩1天13时4分</div>-->
    </div>
    <div class="refresh_sj">您已成功发起退款申请，请耐心等到售后处理</div>
    <div class="suspension">
        <div class="suspension_c suspension_q" onclick="">修改申请</div>
        <div class="suspension_c suspension_y" onclick="">撤销申请</div>
    </div>
    <div style="height: 8px;background: #e5e5e5;"></div>

    <div class="weui-cells">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <p>退款信息</p>
            </div>
            <div class="weui-cell__ft"></div>
        </div>
    </div>
    <div class="weui-panel weui-panel_access weui-panel_bg">
        <div class="weui-panel__bd">
            <div class="weui-media-box_appmsg weui-media-box_appmsgs">
                <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title">商品名称商品名称商品名称商品名称</h4>
                    </div>
                </a>
            </div>
        </div>
    </div>

    <div class="order_number">
        <div class="order_serial">退款原因：<span>不喜欢/不想要</span></div>
        <div class="order_serial">退款金额：<span>￥38.00</span></div>
        <div class="order_serial">申请时间：<span>2019-01-09</span></div>
        <div class="order_serial">退款编号：<span>545212124555452</span></div>
    </div>
</div>
<!--如果商家处理完显示-->
<div class="wpf_orderBox">
    <div class="refresh_box">
        <div class="refresh_name">七退换，0秒响应，请退货给售后</div>
        <div class="refresh_add">还剩4天11时28分</div>
    </div>
    <div class="refresh_sj">售后已同意退货申请，请尽早退货。</div>
    <div class="site_box">
        <div class="site_L">
            <div class="site_img">
                <img src="__PUBLIC__/orderImg/site.svg" alt="">
            </div>
        </div>
        <div class="site_R">
            <div class="site_name_box">
                <div class="site_name">收货人：售后</div>
                <div class="site_phone">18899999999</div>
            </div>
            <div class="site_name_txt">收货地址：广东省 深圳市 龙岗区 横岗街道 大运软件小镇 禾葡兰化妆品有限公司</div>
        </div>
    </div>
    <div class="consult_with">
        <ul class="consult_with_ul">
            <li class="consult_with_li">未与售后协商一致，请勿使用到付或平邮，以免售后拒签货物</li>
            <li class="consult_with_li">请填写真实退货物流信息，逾期未填写，退货申请将关闭</li>
        </ul>
    </div>
    <div class="logistics_number">
        <div class="logistics_number_c logistics_number_cx" onclick="up_refund()">我已寄出<p>点击填写物流单号</p></div>
        <div class="logistics_number_c logistics_number_dj">撤销申请</div>
        <div class="logistics_number_gd" >更多</div>
    </div>
</div>
</body>
</html>
<script src="http://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script>
<script src="http://cdn.suoluomei.com/common/js/jquery-weui.js"></script>
<script src="http://cdn.suoluomei.com/common/js2.0/city-picker/city-picker.min.js"></script>
<script>
    $(document).ready(function (){
    });
    function up_refund(){
        window.location.href="logistics_fill.html";
    }
</script>